<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=screen.width; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>jQuery Google Maps Plugin</title>

	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0a4.1.min.css" />
    <link rel="stylesheet" href="mapapp.css" type="text/css">
    
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
	<script type="text/javascript" src="jquery.mobile/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0a4.1.min.js"></script>     
	<script type="text/javascript" src="jquery.mobile/jquery.ui.map.js"></script>     
	
	
	</head>
  <body>
	<div data-role="page" data-theme="a" id="page-home">
	<div data-role="header" data-theme="a" data-nobackbtn="true">
	<h1>Map Route Sample App</h1>
	</div>
	<h1 style="text-align:center;color:#49b;">Cylon Apps, Inc.</h1>
	<div data-role="content" id="contenthome">

	<script type="text/javascript">
		//Step 2 – Declare a callback for jquery to call when it loads
		$(document).ready(function() {
		//Place to bootstrap your application
		alert(“jquery loaded”);
		});
	</script>
		<div class="ui-grid-a">
		<div class="ui-block-a"><div id="map_square"></div></div>
		<div class="ui-block-b"><p><strong>Tap on the map to see route and driving directions to this location.</strong></p></div>
		</div><!-- /grid-a -->
					
		<p>The sample text and buttons on this page are here as an example of a web app that includes a map and live 
		directions to that location.<br><p>
		<div data-role="controlgroup" data-theme="a" data-type="horizontal">
			<a href="http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1" data-role=button data-icon="info">Info</a>
			<a href="#page-map" data-role=button data-icon="star">Map</a>
			<a href="http://www.mobiledevelopersolutions.com/home/start/included-demo-apps" data-role=button data-icon="grid">Products</a>
		</div>
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h5>Maps created with<br><a href="http://code.google.com/p/jquery-ui-map/">jQuery Google Maps Plugin</a></h5>
	</div><!-- /footer -->	
	</div><!-- /page-home -->

	<div data-role="page" data-theme="c" data-fullscreen="true" id="page-map">

	<div data-role="content" class="map-content">
		<div id="map_canvas"></div>
	</div><!-- /content -->
	
	<div data-role="footer" data-theme="d" data-position="fixed">
	<div data-role="navbar">
	<ul>
    	<li><a href="#page-home">Home</a></li>
    	<li><a href="#page-map" class="refresh">Refresh</a></li>
    	<li><a href="#page-dir">Directions</a></li>
	</ul>
	</div><!-- /navbar -->
	</div><!-- /footer -->
	</div><!-- /page-map -->

	<div data-role="page" data-theme="c" data-fullscreen="true" id="page-dir">

	<div data-role="content">
		<div id="dir_panel"></div>
	</div><!-- /content -->

	<div data-role="footer" data-theme="d" data-position="fixed">
	<div data-role="navbar">
		<ul>
    	<li><a href="#page-home">Home</a></li>
    	<li><a href="#page-map">Map</a></li>
		</ul>
	</div><!-- /navbar -->
	</div><!-- /footer -->
	</div><!-- /page-dir -->

  </body>
</html>
